<template>
	<view class="home-page">
		<van-nav-bar title="摩托帝" />
		<van-notice-bar left-icon="volume-o" scrollable text="激情摩旅,追求自由人生,摩托帝自由人生路上的好朋友,2023年9月上新活动,快来看一看吧!" />
		<form action="/">
			<van-search v-model="inp" show-action placeholder="请输入摩托名字" :clearable="false" @search="onSearch" />
		</form>
		<view class="home-cont">
			<!-- 广告 -->
			<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
				<van-swipe-item v-for="v in swipeList">
					<image :src="v" mode="scaleToFill"></image>
				</van-swipe-item>
			</van-swipe>
			<!-- 功能跳转区域 -->
			<view class="item-wrap">
				<view v-for="v,k in itemList" :key="k" @click="Go(v.path)">
					<image :src="v.img" mode="widthFix"></image>
					<text>{{v.title}}</text>
				</view>
			</view>
			<!-- 资讯博客内容区 -->
			<view class="blog-wrap">
				<view class="blog-item" v-for="v,k in bolgList" :key="k" @click="Go_bolginfo(v.bolgId
)">
					<p>{{v.bolgTitle}}</p>
					<view class="blog-imgs">
						<image :src="v.imgs" mode="widthFix"></image>
						<image :src="v.imgs" mode="widthFix"></image>
						<image :src="v.imgs" mode="widthFix"></image>
					</view>
					<view class="blog-tip">
						<text style="color:#018EFF;">原创</text> <text style="color: #8a8a8a;">{{v.bolgWatch}} 浏览</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	// vant 组件
	import {
		showSuccessToast,
	} from 'vant';
	// ref
	import {
		ref
	} from 'vue'
	// 声明周期函数
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	import $api from '../../request/index.js'

	// 分类
	let itemList = ref([])
	// 咨询
	let bolgList = ref([])
	// 轮播图
	let swipeList = ref([])
	// 搜索
	let inp = ref('')


	onLoad(() => {
		// 资讯列表
		$api.get('/moto/bolg').then(res => bolgList.value = res.data)
		// 轮播图列表
		$api.get('/moto/rotation/h').then(res => res.data.map(item => swipeList.value.push(item.img)))
		// 功能模块 
		$api.get('/home/list').then(res => itemList.value = res.data)
	})

	// 跳转选车
	const Go = (path) => {
		if (path == '/pages/moto/moto') {
			return uni.switchTab({
				url: path
			})
		}
		uni.navigateTo({
			url: path
		})
	}

	// 跳转博客详情
	const Go_bolginfo = (id) => {
		uni.navigateTo({
			// 向详情页面传递 id 值
			url: '/pages/bolg_info/bolg_info' + '?id=' + id,
		})
	}

	// 搜索车型
	const onSearch = val => {
		uni.navigateTo({
			url: '/pages/select_moto/select_moto?type=' + val
		})
		showSuccessToast('搜索成功');
	}
</script>

<style>
	.home-cont {
		height: calc(100vh - 190px);
		overflow-y: scroll;
	}

	.my-swipe {
		margin: 10rpx auto;
		width: 95%;
		height: 100px;
		border-radius: 20rpx;
	}

	.my-swipe .van-swipe-item {
		color: #fff;
		font-size: 20px;
		line-height: 150px;
		text-align: center;
	}

	.my-swipe image {
		width: 100%;
		height: 100px;
	}


	.item-wrap {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		font-size: 13px;
		color: #707070;
	}

	.item-wrap>view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.item-wrap image {
		width: 70rpx;
	}

	.blog-item {
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 14px;
		border-bottom: 1px solid #ddd;
	}

	.blog-item>p {
		margin: 10rpx 0;
	}

	.blog-imgs {
		display: flex;
		justify-content: space-evenly;
	}

	.blog-imgs>image {
		width: 30%;
		border-radius: 10rpx;
	}

	.blog-tip>text {
		font-size: 12px;
	}

	.blog-tip {
		margin-top: 20rpx;
	}
</style>